<template>
  <div id="Header">
    <div class="header-left">
      <i class="iconfont" :class="menuSwitch" @click="changeMenuStatus" :title="changeMenuStatus?'收起':'展开'"></i>
    </div>
    <div class="header-right">
      <span>欢迎您，{{username}}</span>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          设置<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">修改密码</el-dropdown-item>
          <el-dropdown-item command="2">待扩展</el-dropdown-item>
          <el-dropdown-item command="3">待扩展</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <i class="iconfont icon-exit" @click="loginOut()" title="退出"></i>
    </div>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="20%">
      <el-row>
        <el-col :span="24" style="padding-bottom: 15px">
          请输入新密码
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="请输入密码" maxlength="18" minlength="6" v-model="input" show-password></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="[dialogVisible = false , sureBtn()]">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import api from 'plugins/axios/api.js';

export default {
  name: 'headerTop',
  props:{
    menuCollapse:Boolean,
    required:true
  },
  data (){
    return {
      username:localStorage.getItem('ms_username'),
      dialogVisible: false,
      input: ''
    }
  },
  computed:{
    menuSwitch(){
      return this.menuCollapse ? 'icon-menu-open':'icon-menu-close';
    }
  },

  created(){

  },
  methods:{
    loginOut() {
        this.$confirm('即将退出系统, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$router.push('/login')
        }).catch(() => {
        });
    },
    changeMenuStatus(){
      this.$emit('changeStatus',!this.menuCollapse);
    },
    handleCommand(command) {
      switch (Number(command)) {
        case 1:
          this.dialogVisible = true;
          break;
        case 2:
          console.log(2);
          break;
        default:
          return true;
      }
    },
    sureBtn() {
      let _this = this;
      let userId = sessionStorage.getItem('userId');
     if(userId){
        api.setPwd(userId,this.input).then(
            res => {
              _this.$message({
                message: '修改成功！请重新登录',
                showClose: true,
                duration: 1000,
                type: 'success',
                onClose:function () {
                  _this.$router.push('/login')
                }
              });
            },
            err => {
            }
        );
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
#Header
  height 100%
  .header-right
    font-size 14px
    line-height 60px
    float right
    .icon-exit
      font-size 18px
      margin-left 10px
      line-height 60px
      color $theme-color
      cursor pointer
      vertical-align middle
  .header-left
    float left
    .iconfont
      font-size 22px
      color $theme-color
      line-height 60px
  .el-dropdown-link
    cursor pointer
    color #333
  .el-icon-arrow-down
    font-size: 14px
    .el-dropdown-item
     padding 0 30px
  .el-dropdown
    height 40px
</style>


